<template>

	<view class="control-list" v-if="Data.list.length">
		<view class="control-list-li" v-for="(li,index) in Data.list">
			<view class="control-list-li-content">
				<userAvatar :src="li.avatar" :size="80" radius="50%"></userAvatar>
				<view class="control-list-li-content-info">
					<text class="control-list-li-content-username">{{li.username}}</text>
					<text>拉黑原因</text>
				</view>
			</view>

			<view class="control-options">
				<view class="control-options-left">
					<text></text>
				</view>
				<view class="control-options-right">
					<wd-button size="small" hairline @click="clickEdit(li)">编辑</wd-button>
					<wd-button type="error" size="small" hairline @click="clickCancelBlack(li,index)">解除拉黑</wd-button>
				</view>
			</view>

		</view>
	</view>
	
	<wd-status-tip v-else image="search" tip="暂无内容" />
	
	<wd-message-box></wd-message-box>
</template>

<script setup>
	import {
		useMessage
	} from 'wot-design-uni'
	import {
		useToast
	} from 'wot-design-uni'
	const toast = useToast()
	import overallRequest from "@/utool/http/http.js"
	import userAvatar from '@/components/user_avatar/user_avatar.vue'
	const message = useMessage()
	import {
		ref,
		reactive,
		computed,
		watch
	} from "vue"
	import {
		onLoad,
		onReachBottom,
		onReady
	} from "@dcloudio/uni-app"

	// 列表数据
	const Data = reactive({
		page: 1,
		pages: null,
		limit: 10,
		list: []
	})
	onReady(() => {
		getControlList()
	})
	watch(Data.page, (nal) => {
		getControlList()
	})
	// 滚动页面到底部
	onReachBottom(() => {
		let page = Data.page
		let pages = Data.pages
		if (page >= pages) {
			return
		} else {
			Data.page++
			getControlList()
		}
	})

	// 获取列表数据
	function getControlList() {
		let page = Data.page
		let limit = Data.limit
		let url = "/manage/blackList"
		overallRequest(url, {
			data: {
				page,
				limit
			}
		}).then(res => {
			let {
				data
			} = res
			let {
				limit,
				list,
				page,
				total,
				pages
			} = data
			Data.page = page
			Data.limit = limit
			Data.pages = pages
			Data.list.push(...list)
		})
	}

	function clickEdit(item) {

	}
	// 点击解除拉黑
	function clickCancelBlack(user,index) {
		let userId = user.id
		let url = "/manage/CancelBlack"
		message
			.confirm({
				msg: '移出黑名单',
				title: '是否确定移出该用户'
			}).then(() => {
				return overallRequest(url, {
					method: "POST",
					data: {
						user: userId
					}
				})
			}).then(res => {
				let {
					msg
				} = res
				
				Data.list.splice(index,1)
				
				uni.showToast({
					icon: "success",
					title: msg
				})
			})
	}
</script>

<style scoped>
	page {
		height: 100%;
	}

	.control-list {
		display: flex;
		flex-direction: column;
		background: #c3c3c344;
		gap: 15px;
		padding: 30rpx 20px;
		height: 100%;
	}

	.control-list-li {
		display: flex;
		flex-direction: column;
		padding: 20rpx 20rpx;
		padding-left: 35rpx;
		box-sizing: border-box;
		background: white;
		border-radius: 10px;
	}

	.control-list-li-content {
		width: 100%;
		display: flex;
		gap: 25rpx;
	}

	.control-list-li-content-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: gray;
		font-size: 24rpx;
		gap: 12rpx;
	}

	.control-list-li-content-username {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 0rpx;
		color: black;
	}

	.control-options {
		display: flex;
		margin-top: 20rpx;
		border-top: 1rpx solid #d9d9d944;
		padding-top: 20rpx;
	}

	.control-options-left {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 10rpx;
		font-size: 20rpx;
	}

	.control-options-right {
		align-items: center;
		display: flex;
		gap: 15rpx;
	}
</style>